<template>
 <el-button type="danger" @click="outlogin">退出登录</el-button>
<el-tooltip content="I am an el-tooltip">
    <el-button class="show_teiger" >trigger me</el-button>
  </el-tooltip>
<el-backtop :bottom="100">
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
    >
      UP
    </div>
  </el-backtop>
  <div class="home">
    <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>

  <input :type="ck?'text':'password'" placeholder="请输入密码">
  <button @click="ckmm">查看密码</button>



  <div>
    <el-radio-group v-model="size" label="size control">
      <el-radio-button label="large">large</el-radio-button>
      <el-radio-button label="default">default</el-radio-button>
      <el-radio-button label="small">small</el-radio-button>
    </el-radio-group>
  </div>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
        :locale="local"
      />
      
    </div>
    <div class="block">
      <span class="demonstration">Picker with quick options</span>
      <el-config-provider :locale="local">
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
        
      />
      </el-config-provider>
    </div>
  </div>
    
    <img  class="logo" alt="Vue logo"  src="../assets/logo.png">
    <span>通过computed获取的值---{{getcount}}----</span>
    <span>js:{{js}}</span>
    <div>通过this.$store.state.count获取的值{{this.$store.state.count}}</div>
    <div @click="showtoast">点击提示toast</div>
    <van-button type="primary" @click="zja">主要按钮</van-button>
    <div>我的值----{{a}}</div>
    <div>更新后的a----{{newa}}</div>
    <div>未更新的a----{{olda}}</div>
    <div>{{mas}}</div>
    <div>测试计算属性<input type="number" v-model="val1">+<input type="number" v-model="val2" >={{vulz}}</div>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model:show="show" position='top' class="neiy">内容</van-popup>
    <!-- <iframe src="https://www.vifa.cn/" frameborder="0"></iframe> -->
  </div>

  

  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <router-link to="/myck/myck2">到第二页</router-link>
  <router-view/>
</template>

<script>
// @ is an alias to /src
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import HelloWorld from '@/components/HelloWorld.vue'
import { computed } from '@vue/runtime-core'
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
 import { ref } from 'vue'
 import zhcn from 'element-plus/lib/locale/lang/zh-cn'
 import { useRouter} from 'vue-router'


export default {
  name: 'newview',
  setup(){
    const router=useRouter()
    const outlogin= function(){
      
      console.log(router.currentRoute.value)
      localStorage.setItem('token','')
      router.push('/login?redirect='+router.currentRoute.value.fullPath)

    }
   

// const size = ref<'' | 'large' | 'small'>('')
const size = ref('large')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
let local = zhcn

    return{
      size,
      value1,
      value2 ,
      shortcuts,
      disabledDate,
      local,
      outlogin,
    }
  },
  data(){
    return{
      
      mas:1111,
     show:false,
      a:1,
      val1:0,
      val2:0,
      ck:false
      
      
    }
  },
  mounted(){
    console.log('sdsa')
    let old=(new Date().getTime())+3600*24*1000
    console.log(old)

    let d=new Date()
     
    var now =new Date().getTime()
    var sysj=old-now
    console.log(Math.floor(sysj/(3600*1000)))
    var time = new Date(now);
    var y = time.getFullYear();//getFullYear方法以四位数字返回年份
    var moth = time.getMonth() + 1;// getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
    var datas = time.getDate();// getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
    var h = time.getHours();// getHours方法返回 Date 对象的小时 (0 ~ 23)
    var m = time.getMinutes();// getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
    var s = time.getSeconds();// getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
    console.log(moth)
    console.log(y+'-'+moth+'-'+datas+' '+h+':'+m+':'+s)
  },
  components: {
    HelloWorld,
    ElConfigProvider,
  },
  computed:{
    getcount:function(){
      console.log(this.$store.state)
      return this.$store.state.count
    },
    ...mapGetters(["js"]),
    vulz(){
      return this.val1+this.val2
    }
  },
  methods:{
    ckmm(){
      this.ck=!this.ck

    },
    showtoast(){

      console.log(this)
      // console.log(this.$Vant)
//       this.$MintUI.Toast({
//   message: '提示',
//   position: 'bottom',
//   duration: 5000
    this.$toast('提示文案');

// });
    },
    zja(){
      this.a++
    },
    showPopup(){
      this.show=!this.show
    }
    
  },
  watch:{
    '$store.state.count'(newVal,oldVal){
			//对数据执行操作
			console.log(newVal,oldVal)
		},

    a(newval,oldval){
      this.newa=newval
      this.olda=oldval
    }

  }
  
}
</script>
<style>
 .neiy{
   height: 50vh;
 }
 .logo{
  width: 80px;
  height: 80px;
 }
 .demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.show_teiger{
  background-color: red;
}
</style>